<div class="yu-dashboard-container">
	<link rel="stylesheet" type="text/html" href="pages/common/leaderShip/leaderShip.css" />
	<yu-row :gutter="24">
		<yu-col :span="24">
			<yu-col :span="8">
				<div class="yu-dashboard-box" style="height: 390px;">
					<div class="yu-dashboard-title">
						<h1>网格新增客户数排名</h1>
					</div>
					<yu-tabs v-model="addCust" @tab-click="handleClick">
						<yu-tab-pane label="支行" name="first">
							<el-table class="customer-no-border-table" :data="addCustRankByOrgData">
								<el-table-column label="排名" width="80" align="center">
									<template scope="scope">
										<div v-if="scope.row.rank == '1'" style="color:red;font-weight:bold;">{{scope.row.rank}}</div>
										<div v-if="scope.row.rank == '2'" style="color:green;font-weight:bold;">{{scope.row.rank}}</div>
										<div v-if="scope.row.rank == '3'" style="color:blue;font-weight:bold;">{{scope.row.rank}}</div>
										<div v-if="scope.row.rank > 3" style="font-weight:bold;">{{scope.row.rank}}</div>
									</template>
								</el-table-column>
								<el-table-column prop="gridName" label="支行名称" align="center"></el-table-column>
								<el-table-column prop="custNumAdd" label="当月新增客户数" width="140" align="center"></el-table-column>
							</el-table>
						</yu-tab-pane>
						<yu-tab-pane label="网格员" name="second">
							<el-table class="customer-no-border-table" :data="addCustRankByUserData">
								<el-table-column label="排名" width="80" align="center">
									<template scope="scope">
										<div v-if="scope.row.rank == '1'" style="color:red;font-weight:bold;">{{scope.row.rank}}</div>
										<div v-if="scope.row.rank == '2'" style="color:green;font-weight:bold;">{{scope.row.rank}}</div>
										<div v-if="scope.row.rank == '3'" style="color:blue;font-weight:bold;">{{scope.row.rank}}</div>
										<div v-if="scope.row.rank > 3" style="font-weight:bold;">{{scope.row.rank}}</div>
									</template>
								</el-table-column>
								<el-table-column prop="userName" label="客户经理名称" align="center"></el-table-column>
								<el-table-column prop="custNumAdd" label="当月新增客户数" width="140" align="center"></el-table-column>
							</el-table>
						</yu-tab-pane>
					</yu-tabs>
				</div>
			</yu-col>
			<yu-col :span="8">
				<div class="yu-dashboard-box" style="height: 390px;">
					<div class="yu-dashboard-title">
						<h1>当前重点考核指标排名</h1>
					</div>
					<div class="yu-dashboard-content">
						<yu-tabs v-model="importIndex" @tab-click="handleClick">
							<yu-tab-pane label="存款" name="importIndex1">
								<el-table class="customer-no-border-table" :data="importIndexRank1Data">
									<el-table-column label="排名" width="80" align="center">
										<template scope="scope">
											<div v-if="scope.row.rank == '1'" style="color:red;font-weight:bold;">{{scope.row.rank}}</div>
											<div v-if="scope.row.rank == '2'" style="color:green;font-weight:bold;">{{scope.row.rank}}</div>
											<div v-if="scope.row.rank == '3'" style="color:blue;font-weight:bold;">{{scope.row.rank}}</div>
											<div v-if="scope.row.rank > 3" style="font-weight:bold;">{{scope.row.rank}}</div>
										</template>
									</el-table-column>
									<el-table-column prop="gridName" label="网格名称" align="center"></el-table-column>
								</el-table>
							</yu-tab-pane>
							<yu-tab-pane label="经营贷" name="importIndex2">
								<el-table class="customer-no-border-table" :data="importIndexRank2Data">
									<el-table-column label="排名" width="80" align="center">
										<template scope="scope">
											<div v-if="scope.row.rank == '1'" style="color:red;font-weight:bold;">{{scope.row.rank}}</div>
											<div v-if="scope.row.rank == '2'" style="color:green;font-weight:bold;">{{scope.row.rank}}</div>
											<div v-if="scope.row.rank == '3'" style="color:blue;font-weight:bold;">{{scope.row.rank}}</div>
											<div v-if="scope.row.rank > 3" style="font-weight:bold;">{{scope.row.rank}}</div>
										</template>
									</el-table-column>
									<el-table-column prop="gridName" label="网格名称" align="center"></el-table-column>
								</el-table>
							</yu-tab-pane>
							<yu-tab-pane label="苏农贷" name="importIndex3">
								<el-table class="customer-no-border-table" :data="importIndexRank3Data">
									<el-table-column label="排名" width="80" align="center">
										<template scope="scope">
											<div v-if="scope.row.rank == '1'" style="color:red;font-weight:bold;">{{scope.row.rank}}</div>
											<div v-if="scope.row.rank == '2'" style="color:green;font-weight:bold;">{{scope.row.rank}}</div>
											<div v-if="scope.row.rank == '3'" style="color:blue;font-weight:bold;">{{scope.row.rank}}</div>
											<div v-if="scope.row.rank > 3" style="font-weight:bold;">{{scope.row.rank}}</div>
										</template>
									</el-table-column>
									<el-table-column prop="gridName" label="网格名称" align="center"></el-table-column>
								</el-table>
							</yu-tab-pane>
							<yu-tab-pane label="社保卡激活" name="importIndex4">
								<el-table class="customer-no-border-table" :data="importIndexRank4Data">
									<el-table-column label="排名" width="80" align="center">
										<template scope="scope">
											<div v-if="scope.row.rank == '1'" style="color:red;font-weight:bold;">{{scope.row.rank}}</div>
											<div v-if="scope.row.rank == '2'" style="color:green;font-weight:bold;">{{scope.row.rank}}</div>
											<div v-if="scope.row.rank == '3'" style="color:blue;font-weight:bold;">{{scope.row.rank}}</div>
											<div v-if="scope.row.rank > 3" style="font-weight:bold;">{{scope.row.rank}}</div>
										</template>
									</el-table-column>
									<el-table-column prop="gridName" label="网格名称" align="center"></el-table-column>
								</el-table>
							</yu-tab-pane>
						</yu-tabs>
					</div>
				</div>
			</yu-col>
			<yu-col :span="8">
				<div class="yu-dashboard-box" style="margin-bottom: 0;height: 390px;">
					<div class="yu-dashboard-title">
						<h1>网格客户模拟利润提升</h1>
					</div>
					<div class="yu-dashboard-content">
						<el-table class="customer-no-border-table" :data="simuProfitData">
							<el-table-column prop="gridName" label="网格名称" align="center"></el-table-column>
							<!-- <el-table-column prop="depProfit" label="存款模拟利润" align="center"></el-table-column> -->
							<!-- <el-table-column prop="loanProfit" label="贷款模拟利润" align="center"></el-table-column> -->
							<el-table-column prop="sumProfit" label="合计模拟利润" align="center"></el-table-column>
						</el-table>
					</div>
				</div>
			</yu-col>
		</yu-col>
		<yu-col :span="24">
			<yu-col :span="8">
				<div class="yu-dashboard-box" style="margin-bottom: 0;height: 390px;">
					<div class="yu-dashboard-title">
						<h1>全行网格概览</h1>
					</div>
					<div class="yu-dashboard-content">
						<el-table class="customer-no-border-table" :data="simuProfitData">
							<el-table-column prop="gridNumSum" label="全行网格总数" align="center"></el-table-column>
							<el-table-column prop="custNum" label="网格客户数" align="center"></el-table-column>
							<el-table-column prop="documentCustNumY" label="年初至今新建档客户数" align="center"></el-table-column>
							<el-table-column prop="oldCustNum" label="我行客户数" align="center"></el-table-column>
							<el-table-column prop="loanCustNumOnline" label="我行贷款客户数(线上)" align="center"></el-table-column>
							<el-table-column prop="loanCustNumOffline" label="我行贷款客户数(线下)" align="center"></el-table-column>
							<el-table-column prop="gridsceneName" label="网格类型名称" align="center"></el-table-column>
						</el-table>
					</div>
				</div>
			</yu-col>
			<yu-col :span="8">
				<div class="yu-dashboard-box" style="margin-bottom: 0;height: 390px;">
					<div class="yu-dashboard-title">
						<h1>网格黏性排名</h1>
					</div>
					<div class="yu-dashboard-content">
						<yu-tabs v-model="rankType" @tab-click="handleClick">
							<yu-tab-pane label="产品数" name="rankType1">
								<el-table class="customer-no-border-table" :data="gridViscosityRank1Data">
									<el-table-column label="排名" width="80" align="center">
										<template scope="scope">
											<div v-if="scope.row.rank == '1'" style="color:red;font-weight:bold;">{{scope.row.rank}}</div>
											<div v-if="scope.row.rank == '2'" style="color:green;font-weight:bold;">{{scope.row.rank}}</div>
											<div v-if="scope.row.rank == '3'" style="color:blue;font-weight:bold;">{{scope.row.rank}}</div>
											<div v-if="scope.row.rank > 3" style="font-weight:bold;">{{scope.row.rank}}</div>
										</template>
									</el-table-column>
									<el-table-column prop="gridName" label="网格" align="center"></el-table-column>
								</el-table>
							</yu-tab-pane>
							<yu-tab-pane label="产品提升数" name="rankType2">
								<el-table class="customer-no-border-table" :data="gridViscosityRank2Data">
									<el-table-column label="排名" width="80" align="center">
										<template scope="scope">
											<div v-if="scope.row.rank == '1'" style="color:red;font-weight:bold;">{{scope.row.rank}}</div>
											<div v-if="scope.row.rank == '2'" style="color:green;font-weight:bold;">{{scope.row.rank}}</div>
											<div v-if="scope.row.rank == '3'" style="color:blue;font-weight:bold;">{{scope.row.rank}}</div>
											<div v-if="scope.row.rank > 3" style="font-weight:bold;">{{scope.row.rank}}</div>
										</template>
									</el-table-column>
									<el-table-column prop="gridName" label="网格" align="center"></el-table-column>
								</el-table>
							</yu-tab-pane>
							<yu-tab-pane label="人均产品数" name="rankType3">
								<el-table class="customer-no-border-table" :data="gridViscosityRank3Data">
									<el-table-column label="排名" width="80" align="center">
										<template scope="scope">
											<div v-if="scope.row.rank == '1'" style="color:red;font-weight:bold;">{{scope.row.rank}}</div>
											<div v-if="scope.row.rank == '2'" style="color:green;font-weight:bold;">{{scope.row.rank}}</div>
											<div v-if="scope.row.rank == '3'" style="color:blue;font-weight:bold;">{{scope.row.rank}}</div>
											<div v-if="scope.row.rank > 3" style="font-weight:bold;">{{scope.row.rank}}</div>
										</template>
									</el-table-column>
									<el-table-column prop="gridName" label="网格" align="center"></el-table-column>
								</el-table>
							</yu-tab-pane>
							<yu-tab-pane label="人均产品提升数" name="rankType4">
								<el-table class="customer-no-border-table" :data="gridViscosityRank4Data">
									<el-table-column label="排名" width="80" align="center">
										<template scope="scope">
											<div v-if="scope.row.rank == '1'" style="color:red;font-weight:bold;">{{scope.row.rank}}</div>
											<div v-if="scope.row.rank == '2'" style="color:green;font-weight:bold;">{{scope.row.rank}}</div>
											<div v-if="scope.row.rank == '3'" style="color:blue;font-weight:bold;">{{scope.row.rank}}</div>
											<div v-if="scope.row.rank > 3" style="font-weight:bold;">{{scope.row.rank}}</div>
										</template>
									</el-table-column>
									<el-table-column prop="gridName" label="网格" align="center"></el-table-column>
								</el-table>
							</yu-tab-pane>
						</yu-tabs>
					</div>
				</div>
			</yu-col>
			<yu-col :span="8">
				<div class="yu-dashboard-box" style="margin-bottom: 0;height: 390px;">
					<div class="yu-dashboard-title">
						<h1>网格走访排名</h1>
					</div>
					<div class="yu-dashboard-content">
						<el-table class="customer-no-border-table" :data="simuProfitData">
							<el-table-column label="排名" width="80" align="center">
								<template scope="scope">
									<div v-if="scope.row.rank == '1'" style="color:red;font-weight:bold;">{{scope.row.rank}}</div>
									<div v-if="scope.row.rank == '2'" style="color:green;font-weight:bold;">{{scope.row.rank}}</div>
									<div v-if="scope.row.rank == '3'" style="color:blue;font-weight:bold;">{{scope.row.rank}}</div>
									<div v-if="scope.row.rank > 3" style="font-weight:bold;">{{scope.row.rank}}</div>
								</template>
							</el-table-column>
							<el-table-column prop="userName" label="客户经理" align="center"></el-table-column>
							<el-table-column prop="signNum" label="签到次数" align="center"></el-table-column>
						</el-table>
					</div>
				</div>
			</yu-col>
		</yu-col>
	</yu-row>
	
</div>
